<template>
  <div
    v-if="!loading"
    ref="buttonListRef"
    :class="['vc-tabs', border ? 'border' : '']"
  >
    <div class="vc-tabs-header" :style="{gap: gap}">
      <div
        v-for="(tabs, index) in tabsList"
        :key="index"
        :class="['vc-tabs-header-item', currTabs.id === tabs.id ? 'active' : '']"
        :style="getStyle(tabs)"
        @click="clickTabs(tabs)"
      >{{tabs.name || '标签名'}}</div>
    </div>
    <div class="vc-tabs-body">
      <draggable
        v-model="currTabs"
        :class="['vc-tabs-body-container', currTabs.children.length > 0 ? '' : 'empty']"
        :inputParam="inputParam"
        @mouseoverNode="mouseoverNode"
        @activeNode="activeNode"
        @deleteNode="deleteNode"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, watch } from 'vue';
import visual from "@/visual/js/visual";
import tool from "@/utils/tool";
import Draggable from "@/admin/visual/draggable.vue";

const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode']);
const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object,
  inputParam: Object
});
const currNode = ref(props.node);
const currTabs = ref();
const tabsList = ref([]);
const gap = ref('');
const border = ref('');
const loading = ref(true);
const buttonListRef = ref();

const init = async() => {
  loading.value = true;
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  gap.value = props.compStyle['gap'];
  border.value = props.compStyle['border'];
  tabsList.value = tool.deepClone(props.compStyle['tabsList'] || []);
  if (!tabsList.value || tabsList.value.length === 0) {
    tabsList.value.push({id: tool.uuid(), name: '标签1', children: []});
  }
  tabsList.value.forEach(tabs => {
    tabs.builtin = true;
    if (!tabs.children) {
      tabs.children = [];
    }
  });
  if (!currNode.value.children || currNode.value.children.length === 0) {
    currNode.value.children = tabsList.value;
  } else {
    tabsList.value.forEach(tabs => {
      const child = currNode.value.children.find(item => item.id === tabs.id);
      if (child) {
        tabs.children = child.children;
      }
    });
  }

  if (!currTabs.value || !tabsList.value.some(item => item.id === currTabs.value.id)) {
    currTabs.value = tabsList.value[0];
  }
  currNode.value.children = tabsList.value;
  await nextTick(() => loading.value = false);
};

const getStyle = (data) => {
  const compStyle = props.compStyle || {};
  const prefix = currTabs.value.id === data.id ? 'selected.' : '';
  const styleList = compStyle[prefix + 'styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  return style ? visual.parseStyle(style) : visual.parseFontStyle(compStyle);
};

const clickTabs = async(tabs) => {
  currTabs.value = tabs;
};

const activeNode = (node) => {
  emit('activeNode', node);
};

const deleteNode = (item) => {
  emit('deleteNode', item, currNode.value.children);
};

const mouseoverNode = (item) => {
  emit('mouseoverNode', item)
};

watch(() => props.compStyle?.gap, () => {
  gap.value = props.compStyle['gap'];
}, { deep: true });

watch(() => props.compStyle, () => {
  init();
}, { deep: true });

onMounted(async() => {
  await init();
});
</script>

<style scoped lang="scss">
.vc-tabs-header {
  display: flex;
  flex-direction: row;
}
.vc-tabs.border {
  .vc-tabs-header-item {
    padding: 20px 15px;
    border: 1px solid transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: -1px;
  }
  .vc-tabs-header-item:hover {
    padding: 20px 15px;
    border: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .vc-tabs-header-item.active {
    padding: 20px 15px;
    border: 1px solid #ccc;
    border-bottom: 1px solid white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .vc-tabs-body {
    padding: 10px;
    border: 1px solid #ccc;
  }
}
</style>